<script setup>
import { ref } from 'vue'
import Basic from './Basic'
import UserCom from './User'
import Goods from './Goods'
import Pay from './Pay'
import Son from './Son'
import ContractCom from './Contract'
import SettleCom from './Settle'
import { service } from '@utils'

defineProps({
    statuss: Array,
    expressMethods: Array,
    expressCompanys: Array,
    yesNo: Array,
    sonStatuss: Array
})
const visible = ref(false)
const data = ref()
const user = ref()
const contract = ref()
const settle = ref()

const open = (value) => {
    data.value = value
    visible.value = true
    getUser()
    getContract()
    getSettle()
}

const close = () => {
    visible.value = false
    data.value = {}
    user.value = null
    contract.value = null
    settle.value = null
}

const getUser = async () => {
    const res = await service.bfqz.userInfoAll(data.value.userId)
    user.value = res
}

const getContract = async () => {
    const res = await service.bfqz.contractByOrder(data.value.id)
    contract.value = res
}

const getSettle = async () => {
    const res = await service.bfqz.settleByOrder(data.value.id)
    if (res && res.id) {
        settle.value = res
    }
}
//把方法暴露给父组件
defineExpose({
    open
})
</script>
    
<template>
    <el-dialog v-model="visible" title="详情" center @close="close" destroy-on-close :width="900">
        <el-tabs type="border-card" v-if="data">
            <el-tab-pane label="订单基本信息">
                <basic :data="data" :statuss="statuss" :expressMethods="expressMethods" :expressCompanys="expressCompanys" />
            </el-tab-pane>
            <el-tab-pane v-if="contract && contract.state == 1" :label="'合同信息' + contract.state">
                <contract-com v-if="user" :contract="contract" :user="user.userInfo" />
            </el-tab-pane>
            <el-tab-pane label="用户收货地址">
                <user-com v-if="user" :data="data" :user-info="user.userInfo" />
            </el-tab-pane>
            <el-tab-pane label="商品详情">
                <goods :data="data" :yesNo="yesNo" />
            </el-tab-pane>
            <el-tab-pane label="订单支付信息">
                <pay :data="data" />
            </el-tab-pane>
            <el-tab-pane v-if="settle" label="结算单信息">
                <settle-com :settle="settle" />
            </el-tab-pane>
            <el-tab-pane label="子订单信息">
                <son :data="data" :statuss="sonStatuss" />
            </el-tab-pane>
        </el-tabs>
    </el-dialog>
</template>
    